<template>
  <div class="cell_wrap">
      <!-- 一条文章 -->
    <van-cell>
         <!-- 标题 -->
        <template #title>
            <div class="title-box">
          <span>{{artObj.title}}</span>
          <!-- 单图 -->
          <img v-if="artObj.cover.type === 1" v-lazy="artObj.cover.images[0]" alt="" class="thumb">
        </div>
          <!-- 三图 -->
        <div v-if="artObj.cover.type > 1" class="thumb-box">
             <img v-lazy="str"  class="thumb" v-for="(str,index) in artObj.cover.images" :key="index">
             <img src="" alt="">
             <img src="" alt="">
        </div>
        </template>
        <template #label>
             <div class="label-box">
          <span>
              {{artObj.aut_name}}&nbsp;&nbsp;&nbsp;
              {{artObj.comm_count}}评论&nbsp;&nbsp;&nbsp;
              {{timeTo(artObj.pubdate)}}
              </span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" @click="show=true"/>
        </div>
        </template>
</van-cell>
<!-- 反馈面板  get-container="body"--设置弹出层，挂载到哪里- -->
<van-action-sheet v-model="show" :actions="actions" @select="onSelect"  cancel-text="取消" get-container="body"/>
  </div>
</template>
<script>
import { timeTo } from '@/utils'
export default {
  data () {
    return {
      show: false,
      actions: [],
      oneActions: [
        { name: '不感兴趣' }, { name: '反馈垃圾内容' }, { name: '拉黑作者' }
      ]
    }
  },
  props: {
    artObj: Object
  },
  created () {
    this.actions = this.oneActions
    // 默认第一套面板
  },
  methods: {
    timeTo: timeTo,
    onSelect (action) {
      // 反馈面板 - 选择事件
      // 参数一：绑定的数据对象
      if (action.name === '反馈垃圾内容') {
        // 换数据源
        this.actions = [
          // 以模块的方式导出 举报文章 时，后端接口约定的举报类型
          {
            value: -1,
            name: '返回'
          },
          {
            value: 0,
            name: '其它问题'
          },
          {
            value: 1,
            name: '标题夸张'
          },
          {
            value: 2,
            name: '低俗色情'
          },
          {
            value: 3,
            name: '错别字多'
          },
          {
            value: 4,
            name: '旧闻重复'
          },
          {
            value: 6,
            name: '内容不实'
          },
          {
            value: 8,
            name: '侵权'
          },
          {
            value: 5,
            name: '广告软文'
          },
          {
            value: 7,
            name: '涉嫌违法犯罪'
          }
        ]
      } else if (action.name === '返回') {
        this.actions = this.oneActions
      } else {
        this.$emit('removeArt', this.artObj.art_id, action.value)
      }
    }
  }
}
</script>

<style scoped lang='less'>
/* .cell_wrap /deep/ .van-icon-cross{
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
} */
.title-box { // 标题样式
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label-box { // label描述样式
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
